<template>
  <div class="roleBased">
    <el-row class="btnbox">
      <el-button type="warning" class="btn">所有权限</el-button>
      <el-button type="info" class="adddep" @click="add">新增权限值</el-button>
    </el-row>
    <List
      :linklist="linklist"
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
    ></List>
    <fenye/>
  </div>
</template>

<script>
import fenye from '../../components/Paging.vue'
import List from "../../components/StaffComponent/List.vue";
import { roleBasedAxios } from "../../http/apis/staffApi/index";

export default {
  name: "RoleBased",
  components: {
    List,
    fenye
  },
  data() {
    return {
      // 表格标题行
      linklist: [
        {
          id: "0",
          name: "角色名称",
          isRouter: true,
          url: "/information/alterdepartment",
        },
      ],
      // 管理 （修改&删除）
      btnList: [
        {
          id: "0",
          name: "修改",
          type: "角色权限",
        },
        {
          id: "1",
          name: "删除",
          type: "角色权限",
        },
      ],
      // 字段名称
      titleList: ["role_name"],
      // 表格数据
      tableData: [],
    };
  },
  created() {
    this.getdataRole()
  },
  methods: {
    add() {
      this.$router.push("/staff/add-permissions");
    },
    getdataRole() {
      roleBasedAxios()
        .then((res) => {
          console.log("角色权限请求成功：", res.data.data);

          //将后端数据放入新数组
          let roleArr = res.data.data;
          // 将新数组 roleArr 赋值给 tableData
          this.tableData = roleArr;
        })
        .catch((err) => {
          console.log("角色权限请求失败", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.btnbox {
  display: flex;
  justify-content: center;
}

.btn {
  background: #e46f60;
  width: 120px;
  height: 38px;
}

.adddep {
  background: #499c84;
  width: 120px;
  height: 38px;
}
</style>